<template>
  <div></div>
</template>
<script>
import * as qiniu from 'qiniu-js';

export default {
  name: 'upload',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      subscription: null,
      serverUrl: 'http://upload.qiniup.com', //上传图片的地址
      qiniuAddress: this.$config.qiniuAddress,
      // qiniuAddress: 'http://qiniuoss.chenxi618.com',
      TokenQiNiu: { token: '', key: '' },
      fileUpload: { file: null, token: '', key: '' },
      progress: 0,
      isShowProgress: false,
    };
  },
  computed: {},
  methods: {
    clearFiles() {
      if (this.subscription) {
        this.subscription.unsubscribe();
      }
      // .abort();
      this.$refs.upload.clearFiles();
      this.fileUploadList.splice(0, this.fileUploadList.length);
    },
    handleUploadBefore(file) {
      if (file.type != 'video/mp4') {
        this.$message({
          message: '请上传正确的格式',
          type: 'warning',
        });
        return false;
      }
    }, // 上传之前回调
    handleUploadFile(elUpload) {
      let self = this;
      return this.$api.getQiniuToken().then(res => {
        console.log(
          '%c [ res ]-46',
          'font-size:13px; background:pink; color:#bf2c9f;',
          res,
        );
        let token = res.data;
        let match = elUpload.file.name.match(/([^\/]+)\.(\w+)$/);
        let newFileName = `${this.$mock.mock('@uuid')}.${match[2]}`;

        let config = {
          useCdnDomain: true, //是否使用七牛的CDN加速域名上传，默认为false，上传后获取的文件地址为七牛存储空间的原始URL。
          region: qiniu.region.z0, //指定文件上传的区域，例如z0:华东,z1:华北,z2:华南,na0:北美。
        };

        let putExtra = {
          fname: newFileName, //用于指定上传的文件名，如果不指定，则默认使用上传文件的原始文件名。
          params: {}, //用于指定上传文件的扩展参数，例如文件类型、文件大小、上传时间等。
        };
        let key = newFileName;
        let observable = qiniu.upload(
          elUpload.file,
          key,
          token,
          putExtra,
          config,
        );
        self.subscription = observable.subscribe({
          next(res) {
            self.handleProgress(res, elUpload.file);
          },
          error(err) {
            Promise.reject(err);
          },
          complete(res) {
            self.handleUploadSuccess(res, elUpload.file);
            Promise.resolve(res);
          },
        });
        return self.subscription;
      });
    },

    handleProgress(event, file, fileList) {
      let n = this._.get(event, 'total.percent', 0);
      this.progress = parseFloat(n.toFixed(2));
    },
    handleUploadSuccess(response, file, fileList) {
      if (fileList) {
        fileList.forEach(v => {
          this.fileUploadList.push(v);
        });
      }
      if (this._.has(response, 'key')) {
        this.fileUploadList.forEach(v => {
          this.$set(v, 'url', `${this.qiniuAddress}/${response.key}`);
        });
      }

      // console.log(response);
      // console.log(file);
      // console.log(fileList);
      // console.log(this.fileUploadList);
    }, // 上传成功
    handleUploadError(err) {
      this.$message.error(`图片上传失败`);
      return;
    },
    handleRemove(file, fileList) {
      this.fileUploadList = fileList;
    },
  },
};
</script>
<style lang="less" scoped></style>
